<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/9.3.2/highcharts.js"></script>


    <script src="http://cdn.highcharts.com.cn/highstock/9.3.2/highstock.js"></script>


    <script src="http://cdn.highcharts.com.cn/highmaps/9.3.2/highmaps.js"></script>

    <script src="http://cdn.highcharts.com.cn/gantt/9.3.2/highcharts-gantt.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var chart = Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '店铺类别比例图, 2021'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            name: '营业类别',
            colorByPoint: true,
            data: []
        }]
    });
    $.get("/cai/pie/list",function (backData) {
        var info = backData.data;
        chart.series[0].update({
            data:info
        });
    });
</script>
</body>
</html>
